
Lo vi, me llamó la atención y lo puse en práctica.
El efecto queda genial lo podéis ver en mi blog de pruebas, se trata de añadir una burbuja y en su interior el número de comentarios de cada entrada.
El artífice de este invento es nuestro querido amigo Pizcos, vamos a seguir sus explicaciones pero aún así recomiendo ver su blog porque seguro que más de uno quedara encantado con todo lo que nos enseña.
Como de costumbre ubicamos ]]></b:skin> y justo antes añadimos:
.numComments {
background: url(url-imagen) no-repeat top right;
float:right;
text-align: center;
padding: 10px 0 0 0;
font-size: 150%;
width: 50px;
height:50px;
color: #fff;
}
.numComments a:link{
color: #CODIGO HEXADECIMAL;
}
.numComments a:visited{
color: #CODIGO HEXADECIMAL;
}
.numComments a:hover{
color: #CODIGO HEXADECIMAL;
}
background: url(url-imagen) no-repeat top right;
float:right;
text-align: center;
padding: 10px 0 0 0;
font-size: 150%;
width: 50px;
height:50px;
color: #fff;
}
.numComments a:link{
color: #CODIGO HEXADECIMAL;
}
.numComments a:visited{
color: #CODIGO HEXADECIMAL;
}
.numComments a:hover{
color: #CODIGO HEXADECIMAL;
}
Guardamos los cambios y expandimos la plantilla de artilugios donde buscaremos:
<b:if cond='data:post.title'>
Justo después añadiremos:
<span class='numComments'><a expr:href='data:post.url'><data:post.numComments/></a></span>
Si deseamos que nuestra página abra por la página de los comentarios en lugar del anterior código añadiremos:<span class='numComments'><a expr:href='data:post.addCommentUrl'><data:post.numComments/></a></span>
Veamos lo que según Pizcos podemos modificar:
.numComments {
background: url(url-imagen) no-repeat top right;

float:right;

text-align: center;

padding: 10px 0 0 0;

font-size: 150%;

width: 50px;

height:50px;

color: #fff;

.numComments a:link

.numComments a:visited

.numComments a:hover

Colores hexadecimales.
Pizcos proporciona un zip conteniendo las imágenes que son las siguientes y también podéis guardar desde aquí.








Lo siento, no he sido capaz de incorporar la imagen del globo. Me salen el número de comentarios pero no la imagen.
Jaume
Hola Gema!

He implementado este codigo y todo va bien, solo que no puedo eliminar el numero de los comentarios despues del post...sabes que tengo que hacer?
Gracias de todo
A mi me pasa lo mismo, me sale el pequeño numero pero no la imagen del globo, ademas me sale encima de el titulo
Me pasa lo mismo que a Jaume
Raúl en tu blog lo veo perfectamente, es el mismo problema del otro día se visualiza con Firefox y con Explorer no.
Prueba a añadir la imagen de esta forma background-image:y aquí el resto.
background:url(http://4.bp.blogspot.com/_cXLrfHfNqC4/TKOfLGPG32I/AAAAAAAAAP4/rAEwD4GfinU/s1600/Dibujo.png) no-repeat top right;
Hola, mi problema es que en mi plantilla no aparece el número de comentarios en la portada. Me podrias ayudar?
www.dechivilcoy.com.a
Gracias
Alcides
Disculpa, tiene un error
http://www.dechivilcoy.com.ar/
Administrador en tu plantilla si sale el número de comentarios pero hay que visualizar la entrada completa, este es un ejemplo:

http://www.dechivilcoy.com.ar/2010/10/rural-bike-en-roque-perez-con-varios.html
El número de comentarios sale en la parte superior derecha de la entrada y en el footer de la entrada, es decir justo al terminar la entrada
Disculpa, evidentemente no he sabido explicarme. Donde no aparecen los números es en la "portada", en la home. En el Inicio.
Quisiera que junto a los títulos de la "portada" se vea el número de comentarios.
Muchas gracias por tu atención.
Disculpa las molestias
Alcides
Muchas gracias Gema!! me ha sido muy útil, siendo la primera vez que tocava algo del codigo...prueba superada!!
Hola Gema!
Tengo un problema con este codigo: lo he puesto en mi blog de prueba para ver como sale y va todo bien, solo en las paginas estaticas, donde deberia no verse, se vé! Como puedo hacer?
Ah, Gema, me estaba olvidando

He clicado sobre la opcion "no permitir" comentarios, entonces no deberia verse!
Gracias por todo!
Perdone, no deberia verse, pero se ve, este es el problema! Besitos!
Justo después de ]]></b:skin> añadimos:
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
.numComments {
visibility:hidden;
display:none;
background: url(url-imagen) no-repeat top right;
float:right;
text-align: center;
padding: 10px 0 0 0;
font-size: 150%;
width: 50px;
height:50px;
color: #fff;
}
</style>
</b:if>
@Gem@ Graciaaaassss!!!!!

Lo he implementado justo ahora y funciona!!! Gracias gracias gracias!!!
Hola Gema me pregunto si se puede quitar esto de las burbujas de las paginas estáticas.
Mi blog AUB'S puedes ver que en Contacto sale la burbuja.
De antemano gracias.
http://gemablog-.blogspot.com/2011/03/estilos-para-las-paginas-estaticas.html
"Para que en las páginas estáticas no se vea se puede condicionar de la siguiente forma"
Justo después de ]]></b:skin> añadimos:
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
.numComments {
visibility:hidden;
display:none;
background: url(url-imagen) no-repeat top right;
float:right;
text-align: center;
padding: 10px 0 0 0;
font-size: 150%;
width: 50px;
height:50px;
color: #fff;
}
</style>
</b:if>
Primero que nada gracias por esta información. Me has ayudado mucho. El globo me ha quedado bien.
Sin embargo me pregunto si será posible cambiar alguna parte del código para que cuando un lector haga clic en el globo se desplaze hasta la parte de los comentarios en la entrada correspondiente (a diferencia de este caso que se desplaza a la entrada, pero no a la sección de comentarios).
Espero haber sido claro.
Muchas gracias!
Primero que nada gracias por esta información. Me has ayudado mucho. El globo me ha quedado bien.
Sin embargo me pregunto si será posible cambiar alguna parte del código para que cuando un lector haga clic en el globo se desplaze hasta la parte de los comentarios en la entrada correspondiente (a diferencia de este caso que se desplaza a la entrada, pero no a la sección de comentarios).
Espero haber sido claro.
Muchas gracias!
Eso se refiere a lo que deseas hacer porque marcando sobre el globo o burbuja nos lleva al formulario de comentarios.
teengo un problemitaa
, el link me aparece azul hasta que le hago click D:
el link me aparece azuuul hasta que le hago click, hay alguna forma de solucionarlo?
.numComments a{
color: #FBF7E1;
text-decoration:none;
}
Nota: solo los miembros de este blog pueden publicar comentarios.